import { NavLink, Outlet, useNavigate } from 'react-router-dom'
import { Button, Dropdown, Avatar, Space } from 'antd'
import type { MenuProps } from 'antd'
import { UserOutlined, LogoutOutlined } from '@ant-design/icons'
import { useAppDispatch, useAppSelector } from '../store/hooks'
import { logout } from '../store/slices/userSlice'
import { message } from 'antd'
import styles from './Layout.module.scss'

const Layout = () => {
  const navigate = useNavigate()
  const dispatch = useAppDispatch()
  const user = useAppSelector((state) => state.user.user)
  const isAuthenticated = useAppSelector((state) => state.user.isAuthenticated)

  const handleLogout = () => {
    dispatch(logout())
    message.success('已退出登录')
    navigate('/login')
  }

  const getNavLinkClass = ({ isActive }: { isActive: boolean }) =>
    `${styles.navLink} ${isActive ? styles.navLinkActive : ''}`.trim()

  const userMenuItems: MenuProps['items'] = [
    {
      key: 'user-info',
      label: (
        <div style={{ padding: '8px 0' }}>
          <div style={{ fontWeight: 'bold' }}>{user?.name || user?.username}</div>
          <div style={{ fontSize: '12px', color: '#999' }}>{user?.role}</div>
        </div>
      ),
      disabled: true,
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      label: '退出登录',
      icon: <LogoutOutlined />,
      onClick: handleLogout,
    },
  ]

  return (
    <div className={styles.layout}>
      <nav className={styles.nav}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '20px', flexWrap: 'wrap' }}>
          <NavLink to="/" end className={getNavLinkClass}>
            首页
          </NavLink>
          <NavLink to="/about" className={getNavLinkClass}>
            关于
          </NavLink>
          <NavLink to="/deepspeek" className={getNavLinkClass}>
            DeepSeek
          </NavLink>
          <NavLink to="/digital-human" className={getNavLinkClass}>
            数字人
          </NavLink>
          <NavLink to="/digital-human-m" className={getNavLinkClass}>
            基础数字人
          </NavLink>
          <NavLink to="/danmaku" className={getNavLinkClass}>
            弹幕
          </NavLink>
          <NavLink to="/su7" className={getNavLinkClass}>
            SU7
          </NavLink>
          <NavLink to="/hangzhou-ink-painting" className={getNavLinkClass}>
            杭州水墨画
          </NavLink>
          <NavLink to="/video-list" className={getNavLinkClass}>
            视频列表
          </NavLink>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          {isAuthenticated && user ? (
            <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
              <Space style={{ cursor: 'pointer' }}>
                <Avatar size="small" icon={<UserOutlined />} />
                <span>{user.name || user.username}</span>
              </Space>
            </Dropdown>
          ) : (
            <Button type="primary" onClick={() => navigate('/login')}>
              登录
            </Button>
          )}
        </div>
      </nav>
      <main className={styles.main}>
        <Outlet />
      </main>
    </div>
  )
}

export default Layout

